<template>
  <div class="exper">
 
  <Header></Header>
    <ul class="banner1">
    <li @click="focus" :class="currentindex==0 ? 'active':''">关注</li>
    <li @click="push1" :class="currentindex==1?'active':''">推荐</li>
    <li @click="client" :class="currentindex==2?'active':''">求职</li>
    <li @click="qs" :class="currentindex==3?'active':''">问答交流</li>
    <li @click="hotarticle" :class="currentindex==4?'active':''">好文</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

 import Header from '../../components/Header.vue'   


export default {
  data(){
    return{
currentindex:2
    }
  },
    
components:{
 
   Header
},
methods: {
  
  focus(){
    this.currentindex=0
    this.$router.push('/exper/focus')
  },
  push1(){this.currentindex=1
    this.$router.push('/exper/push1')
  },
  client(){this.currentindex=2
    this.$router.push('/exper/client')
  },
  qs(){this.currentindex=3
    this.$router.push('/exper/aq')
  },
  hotarticle(){this.currentindex=4
    this.$router.push('/exper/hotarticle')
  }
},

}
</script>

<style lang="scss" scoped>

.banner1{
  width: 100%;
  height: .35rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  li{
    width: 20%;
    text-align: center;
  }
}
.active{
  font-weight: 600;
  font-size: .2rem;
}
</style>